<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">采购单号</label>
        <div class="common-search-conrol">
          <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.purchaseNumber" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">申请单号</label>
        <div class="common-search-conrol">
          <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.applyNumber" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">包含商品</label>
        <div class="common-search-conrol">
          <input type="text" nz-input placeholder="69码商品编码或名称" nzSize="default" [(ngModel)]="queryForm.whGood" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">新建日期</label>
        <div class="common-search-conrol">
          <nz-range-picker [nzFormat]="dateFormat" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.state">
            <nz-option nzLabel="全部" nzValue=""></nz-option>
            <nz-option nzLabel="草稿" nzValue="0"></nz-option>
            <nz-option nzLabel="待审核" nzValue="1"></nz-option>
            <nz-option nzLabel="审核通过" nzValue="2"></nz-option>
            <nz-option nzLabel="审核不通过" nzValue="3"></nz-option>
            <nz-option nzLabel="入库中" nzValue="4"></nz-option>
            <nz-option nzLabel="已完成" nzValue="5"></nz-option>
            <nz-option nzLabel="已关闭" nzValue="6"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
          <button nz-button nzType="default" (click)="resetQuery()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="opera-wrap p-b-15">
    <button nz-button nzType="primary" [routerLink]="['../purchaseOrderAdd',0]" *ngIf="permission.userPermission.has('stock:purchaseOrder:add')">新建采购单</button>
  </div>

  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableLoading"
      [nzData]="listOfData?.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="listOfData?.total"
      [nzPageIndex]="listOfData?.current"
      [nzPageSize]="listOfData?.size"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)">
      <thead>
      <tr>
        <th nzAlign="center" nzWidth="180px" nzLeft>采购单号</th>
        <th nzAlign="center" nzWidth="120px">状态</th>
        <th nzAlign="center" nzWidth="180px">供应商</th>
        <th nzAlign="center" nzWidth="150px">采购内容</th>
        <th nzAlign="center" nzWidth="150px">冻结内容</th>
        <th nzAlign="center" nzWidth="150px">已入库</th>
        <th nzAlign="center" nzWidth="160px">约定交货日期</th>
        <th nzAlign="center" nzWidth="200px">备注</th>
        <th nzAlign="center" nzWidth="160px">完成/关闭时间</th>
        <th nzAlign="center" nzWidth="160px">新建时间</th>
        <th nzAlign="center" nzWidth="300px" nzRight>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr *ngFor="let data of basicTable.data; let index = index;">
        <!-- 采购单号 -->
        <td nzAlign="center" nzLeft>{{ data.purchaseNumber }}</td>
        <!-- 状态 -->
        <td nzAlign="center" [class]="'font-' + data.state">
          {{ data.stateText }}
          <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" nzTooltipTitle="{{data.auditDesc}}" nzTooltipPlacement="right" *ngIf="data.state == 3"></i>
        </td>
        <!-- 供应商 -->
        <td nzAlign="center">供应商字段</td>
        <!-- 计划内容 -->
        <td nzAlign="center">{{ data.applyContent ? data.applyContent : '---' }}</td>
        <!-- 冻结内容 -->
        <td nzAlign="center">{{ data.frozenContent ? data.frozenContent : '---' }}</td>
        <!--  已入库-->
        <td nzAlign="center">{{ data.storedContent ? data.storedContent : '---' }}</td>
        <!-- 约定交货日期 -->
        <td nzAlign="center">约定交货日期字段</td>
        <!-- 备注 -->
        <td nzAlign="center">{{ data.remark ? data.remark : '---' }}</td>
        <!-- 完成/关闭时间 -->
        <td nzAlign="center">{{ data.endTime ? data.endTime : '---' }}</td>
        <!-- 新建时间 -->
        <td nzAlign="center">{{ data.createTime }}</td>
        <!-- 操作 -->
        <td nzAlign="center" nzRight>
          <button
            *ngIf="permission.userPermission.has('stock:purchaseOrder:view')"
            nz-button
            nzType="link"
            [routerLink]="['../purchaseOrderDetails', data.id]">
            查看
          </button>
          <button
            *ngIf="permission.userPermission.has('stock:purchaseOrder:edit')"
            nz-button
            nzType="link"
            [routerLink]="['../purchaseOrderAdd', data.id]"
            [disabled]="data.state != 0 && data.state != 3">
            编辑
          </button>
          <button
            *ngIf="permission.userPermission.has('stock:purchaseOrder:check')"
            nz-button
            nzType="link"
            [routerLink]="['../purchaseOrderDetails', data.id]"
            [disabled]="data.state != 1">
            审核
          </button>
          <button
            *ngIf="(data.state == 2 || data.state == 4) && data.isTrue == 1"
            nz-button
            nzType="link"
            [routerLink]="['/stock/putSave', 0, { type:'create',number: data.purchaseNumber}]">
            生成入库单
          </button>
          <button
            *ngIf="permission.userPermission.has('stock:purchaseOrder:manuallyCLose')"
            nz-button
            nzType="link"
            [routerLink]="['../purchaseOrderDetails', data.id]"
            [disabled]="data.state != 2 && data.state != 4">
            手动关闭
          </button>
          <a
            *ngIf="permission.userPermission.has('stock:purchaseOrder:delete')"
            nz-button
            nzType="link"
            nzDanger
            nz-popconfirm
            nzPopconfirmTitle="确认删除吗?"
            [nzIcon]="iconTpl"
            (nzOnConfirm)="confirm(data.id)"
            [disabled]="data.state != 0">
            删除
          </a>
          <ng-template #iconTpl>
            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
          </ng-template>
          <button
            *ngIf="permission.userPermission.has('stock:purchaseOrder:export')"
            nz-button
            nzType="link"
            (click)="onExportOrder(data)">
            导出
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>
